<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .cover {
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background-color: rgba(0,0,0,.5);
            display: flex;
            justify-content: center;
            align-items: center;
            display: none;
        }
        .main{
            background-color: #fff;
            width: 300px;
            height: 200px;
            padding: 30px;
        }
    </style>
</head>
<body>
    <input class="nickname" type="text" placeholder="昵称"> <br> <br>
    <textarea class="comment" placeholder="请输入评论"></textarea> <br>
    <button class="message">留言</button>

    <ul class="list">
        <!-- <li>
            <h4>2022-4-21 12:12:12</h4>
            <h3>昵称</h3>
            <p>留言的内容</p>
            <div class="reply">
                <p>回复的内容1</p>
            </div>
            <button>回复</button>
            <button>删除</button>
        </li> -->
    </ul>

    <div class="cover">
        <div class="main">
            <p>请输入回复</p>
            <textarea class="answer" placeholder="请输入评论"></textarea> <br>
            <button class="confirm">确认</button>
            <button class="cancel">取消</button>
        </div>
    </div>

    <script src="../js/tools.js"></script>
    <script>

        // 点击留言按钮  
        //     判断输入   留言
        //     倒计时

        // 删除 ？ 
        //   注意   一开始的删除按钮是没有的,留言以后才有 ， 删除有很多个？？？？
        //          直接获取li里面的删除


        // 回复
        //    确认回复的时候，找对回复显示的地方  
        //    注意在点击回复的时候，就要找到那个div







        var oMessage = get('.message') ;
        var oName = get('.nickname') ;
        var oComment = get('.comment') ;
        var oUl = get('.list') ;
        var oCover = get('.cover') ;


        // 留言
        oMessage.onclick = function() {
            // 获取名称和内容
            var names = oName.value ;
            var content = oComment.value ;
            // 判断名称和内容都不为空
            if(names && content) {
                // 创建留言
                createMsg(names , content) ;

                // 写倒计时
                djs(this , 10) ;
            }
        }










        function createMsg(names , content) {
            // 创建一个li
            var oLi = document.createElement('li') ;
            // 添加内容
            oLi.innerHTML = `
                <h4>${formatDate()}</h4>
                <h3>${names}</h3>
                <p>${content}</p>
                <div class="reply"></div>
                <button class="reply_btn">回复</button>
                <button class="del_btn">删除</button>
            `;
            oUl.appendChild(oLi) ;

            // oUl.insertBefore(oLi , firstChild) ;

            oComment.value = '' ;

            // 留言以后才会有删除按钮   删除按钮有多个
            // var oDels = document.querySelectorAll('.del_btn') ;

            // 每一次创建了li的时候，就给里面的删除按钮绑定了点击事件
            var oDel = oLi.querySelector('.del_btn') ;

            oDel.onclick = function() {
                this.parentNode.remove() ;
            }



            // 回复
            var oReplyBtn = oLi.querySelector('.reply_btn') ;
            oReplyBtn.onclick = function() {
                // 出现弹窗
                oCover.style.display = 'flex' ;

                // 点击回复的时候，必须要记录回复的位置
                var oReply = this.previousElementSibling ;


                // 取消
                var oCancel = oCover.querySelector('.cancel') ;
                oCancel.onclick = function() {
                    // 关闭弹窗
                    oCover.style.display = 'none' ;
                }


                // 确认
                var oConfirm = oCover.querySelector('.confirm') ;
                oConfirm.onclick = function() {
                    // 先获取回复的内容
                    var oAns = oCover.querySelector('.answer') ;
                    var answers = oAns.value ;
                    if(answers) {
                        var oP = document.createElement('p') ;
                        oP.innerHTML = answers ;
                        // oP插入到div中去   ---- 一定要在点击回复的时候就找到
                        oReply.appendChild(oP) ;
                    }
                    // 关闭弹窗
                    oCover.style.display = 'none' ;
                }
            }

        }




    </script>
</body>
</html>